<template>
	<view class="page_wrapper page_bg">
		<view class="main_block">
			<view v-for="(item, index) in calcTypeList" 
						@tap="selectThisType(item)" 
						class="item_block"
						:class="{'active' : item === currentType}" >
				{{item}}
			</view>
		</view>
		<!-- <view class="bottom_block">
			<view class="fcz_btn" @tap="downloadImg()">下载练习题</view>
		</view> -->
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	export default {
		data() {
			return {
				calcTypeList: ['凑十法', '平十法', '借十法', '破十法'],
				currentType: ''
			}
		},
		methods: {
			selectThisType(selectType) {
				this.currentType = selectType
			},
			downloadImg() {
				if(!this.currentType) {
					uni.showToast({ icon: "none", title: "请先选择练习类型" })
					return false
				}
				// const url = request.wrapperToken(`/mathExams/${this.currentType}/download`)
				// uni.downloadFile({
				// 	url: url,
				// 	success: (res) => {
				// 		if (res.statusCode === 200) {
				// 			console.log('下载成功')
				// 			console.log(res.tempFilePath)
				// 			uni.saveImageToPhotosAlbum({
				// 				filePath: res.tempFilePath,
				// 				success() {
				// 					uni.showToast({ icon: "none", title: "图片保存成功，请到手机相册查看" })
				// 				},
				// 				fail(e) {
				// 					const msg = "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject
				// 					uni.showModal({ content: msg, showCancel: false })
				// 				}
				// 			})
				// 		} else {
				// 			console.log('下载失败')
				// 			console.log(res)
				// 			uni.showToast({ icon: 'none', title: '下载失败，可联系群主反馈' })
				// 		}
				// 	},
				// 	fail(e) {
				// 			console.log('下载失败~~~~~~~~~~~~~~~~fail~')
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		
		.main_block{
			flex: 1;
			background-color: white;
			display: flex;
			flex-direction: column;
			margin: 15px;
			padding: 15px;
			overflow-y: scroll;
			.item_block{
				color: white;
				height: 40px;
				margin-bottom: 15px;
				background-color: cornflowerblue;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.active{
				background-color: orange;
			}
		}
		.bottom_block{
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
